<template>
	<el-drawer
	  v-model="dialog.visible"
	  :title="dialog.title"
	  append-to-body
	  @close="closeDialog"
	  :close-on-click-modal="false"
	  size="750"
	>
	
		<el-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			label-width="120px"
		>
			<el-form-item label="数据源名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入数据源名称" />
			</el-form-item>
			
			<el-form-item label="数据源标识" prop="code">
				<el-input v-model="formData.code" placeholder="请输入数据源标识" />
			</el-form-item>
			
			<el-form-item label="数据源类型" prop="type">
				<el-select v-model="formData.type" placeholder="请选择数据源类型" style="width: 100%" disabled>
				    <el-option-group
				      v-for="group in options"
				      :key="group.label"
				      :label="group.label"
				    >
				      <el-option
				        v-for="item in group.options"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value"
				      />
				    </el-option-group>
				</el-select>
			</el-form-item>
			
			<!--MySql-->
			<el-form-item label="JDBC连接地址" prop="url">
				<el-input v-model="formData.url" placeholder="请输入url" />
			</el-form-item>
			
			<el-form-item label="数据源用户" prop="user">
				<el-input v-model="formData.user" placeholder="请输入名用户" />
			</el-form-item>
			
			<el-tooltip :visible="isCapslock" content="大写锁定" placement="right">
			  <el-form-item label="数据源密码" prop="password">
			    <el-input
			      v-model="formData.password"
			      placeholder="请输入密码"
			      type="password"
			      name="password"
			      show-password
			      @keyup="checkCapslock"
			    />
			  </el-form-item>
			</el-tooltip>
			
			<el-form-item label="初始化大小" prop="initialSize">
			  <el-input-number  v-model="formData.initialSize" placeholder="请输入初始化大小" style="width: 250px;" />
			</el-form-item>
			
			<el-form-item label="最小连接数" prop="minIdle">
			  <el-input-number  v-model="formData.minIdle" placeholder="请输入最小连接数"  style="width: 250px;" />
			</el-form-item>
			
			<el-form-item label="最大连接数" prop="maxActive">
			  <el-input-number v-model="formData.maxActive" placeholder="请输入最大连接数" style="width: 250px;" />
			</el-form-item>
					
			<el-form-item label="连接超时时间" prop="maxWait">
			  <el-input v-model="formData.maxWait" placeholder="请输入连接超时时间" type="number" style="width: 250px;">
			    <template #append>毫秒</template>
			  </el-input>
			</el-form-item>
			
			<el-form-item label="输出SQL" prop="showSql">
			  <el-switch
			    v-model="formData.showSql"
			    inline-prompt
			    active-text="输出"
			    inactive-text="不输出"
			    :active-value="'1'"
			    :inactive-value="'0'"
			  />
			</el-form-item>
			
			<el-form-item label="数据源是否启用" prop="enabled">
			  <el-switch
			    v-model="formData.enabled"
			    inline-prompt
			    active-text="是"
			    inactive-text="否"
			    :active-value="'1'"
			    :inactive-value="'0'"
			  />
			</el-form-item>
			
			<el-form-item label="数据源默认启动" prop="defaultBoot">
			  <el-switch
			    v-model="formData.defaultBoot"
			    inline-prompt
			    active-text="启动"
			    inactive-text="不启动"
			    :active-value="'1'"
			    :inactive-value="'0'"
			  />
			</el-form-item>
		</el-form>
	
		<template #footer>
		  <div class="dialog-footer">
			<el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
			<!-- <el-button type="warning" @click="submitCheck"  :loading="loading">校验</el-button> -->
			<el-button @click="closeDialog" :loading="loading">取 消</el-button>
		  </div>
		</template>
	</el-drawer>
</template>

<script lang="ts" setup>
	
	import DatasourceAPI from "@/api/biz/datasource";
	import type {FormRules } from 'element-plus'
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	const isCapslock = ref(false); // 是否大写锁定
	const options = [
	  {
	    label: 'OLTP',
	    options: [
	      {
	        value: 'mysql',
	        label: 'MySQL',
	      },
	      {
	        value: 'sqlserver',
	        label: 'SQL Server',
	      },
		  {
		    value: 'sqlite',
		    label: 'Sqlite',
		  },
		  {
		    value: 'postgresql',
		    label: 'Postgresql',
		  },
		  {
		    value: 'oracle',
		    label: 'Oracle',
		  },
	    ],
	  },
	]
	
	const formRef=ref();
	const formData=ref<any>({
	})
	
	const formRules=reactive<FormRules>({
		name: [{ required: true, message: "必填字段.", trigger: "blur" }],
		code: [{ required: true, message: "必填字段.", trigger: "blur" }],
		type: [{ required: true, message: "必填字段.", trigger: "blur" }],
		user: [{ required: true, message: "必填字段.", trigger: "blur" }],
		password: [{ required: true, message: "必填字段.", trigger: "blur" }],
		url: [{ required: true, message: "必填字段.", trigger: "blur" }],
		initialSize: [{ required: true, message: "必填字段.", trigger: "blur" }],
		minIdle: [{ required: true, message: "必填字段.", trigger: "blur" }],
		maxActive: [{ required: true, message: "必填字段.", trigger: "blur" }],
		maxWait: [{ required: true, message: "必填字段.", trigger: "blur" }],
		enabled: [{ required: true, message: "必填字段.", trigger: "blur" }],
		defaultBoot: [{ required: true, message: "必填字段.", trigger: "blur" }],
		showSql: [{ required: true, message: "必填字段.", trigger: "blur" }],
	});
	
	async function openDialog(row?: any, type?: string) {
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
			formData.value.type = row.type;
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
			formData.value.id = row.id;
			formData.value.name = row.name;
			formData.value.code = row.code;
			formData.value.type = row.type;
			formData.value.enabled = row.enabled;
			formData.value.defaultBoot = row.defaultBoot;
			if(row.config){
				var config = JSON.parse(row.config);
				if(config){
					formData.value.user = config.user;
					formData.value.password = config.password;
					formData.value.url = config.url;
					formData.value.initialSize = config.initialSize;
					formData.value.minIdle = config.minIdle;
					formData.value.maxActive = config.maxActive;
					formData.value.maxWait = config.maxWait;
					formData.value.showSql = config.showSql;
				}
			}
		}
	}
	
	const submitForm=()=>{
		formRef.value.validate((isValid: boolean) => {
		  if (isValid) {
			   loading.value = true;
				DatasourceAPI.save({
					id:formData.value.id,
					name:formData.value.name,
					code:formData.value.code,
					type:formData.value.type,
					src:"OLTP",
					enabled:formData.value.enabled,
					defaultBoot:formData.value.defaultBoot,
					config:JSON.stringify({
						user:formData.value.user,
						password:formData.value.password,
						url:formData.value.url,
						initialSize:formData.value.initialSize,
						minIdle:formData.value.minIdle,
						maxActive:formData.value.maxActive,
						maxWait:formData.value.maxWait,
						showSql:formData.value.showSql,
					})
				})
				.then(() => {
				    ElMessage.success("成功");
					closeDialog();
				})
				.finally(() => (loading.value = false));
		  }
		});
	}
	
	// const submitCheck=()=>{
	// }
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',formData)
		resetForm();
	}
	
	// 检查输入大小写
	function checkCapslock(event: KeyboardEvent) {
	  // 防止浏览器密码自动填充时报错
	  if (event instanceof KeyboardEvent) {
	    isCapslock.value = event.getModifierState("CapsLock");
	  }
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
		formRef.value.resetFields();
		formRef.value.clearValidate();
		formData.value.id = undefined;
		formData.value.name = undefined;
		formData.value.code = undefined;
		formData.value.type = undefined;
		formData.value.user = undefined;
		formData.value.password = undefined;
		formData.value.url = undefined;
		formData.value.initialSize = 1;
		formData.value.minIdle = 5;
		formData.value.maxActive = 200;
		formData.value.maxWait = 30;
		formData.value.enabled = '0';
		formData.value.defaultBoot = '0';
		formData.value.showSql = '0';
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
</style>